<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>朔望 -用户编辑</title>
    <!--    Rem初始-->
    <script src="/Syzygy/static/js/RemInitialize.js"></script>
</head>
<body id="body" style="margin: 0 0 ;padding: 0 0;background-color: rgb(230,230,230);">
<!--    返回-->
<a href="/Syzygy">
    <div style="position:fixed;width: 0.1rem;height: 0.51rem ">
    </div>
</a>
<a href="/Syzygy">
    <div style="position:fixed;right:0;width: 0.1rem;height: 0.51rem ">
    </div>
</a>

<!--卡片-->
<div style="background-color: rgb(200,200,200);width: 0.8rem;height: 0.5rem;margin: 0.005rem auto;border-radius: 0.03rem;overflow: hidden">
    <div style="width: 0.7rem;height:0.4rem;margin: 0.05rem 0.05rem;font-size: 0.015rem">
        <form id="userForm" action="/Syzygy/User/" method="post" enctype="multipart/form-data"
        onsubmit="return checkEditUser()">
            <input type="hidden" name="_method" value="PUT">
<!--            头像显示-->
            <div style="display: block;width: 0.7rem;height: 0.14rem;">
                <div style="float:left;width: 0.35rem;height: 0.14rem;background-color: rgb(220,220,220);display: flex;justify-content: center;align-items: center">
                    <img id="imagePreview" src="" style="display: block;max-width: 100%">
                </div>
                <p id="info"
                   style="float:right;margin: 0 0;padding: 0 0;height: 0.14rem;width: 0.35rem;font-size: 0.01rem;background-color: rgb(210,210,210);text-align: center"></p>
            </div>
            请选择头像：
            <input id="headSculptureFile" name="file" type="file" style="display: block;background-color:rgb(190,190,190);width: 0.7rem;height: 0.02rem;font-size: 0.012rem">
            请编辑昵称：
            <input id="nickname" name="nickname" type="text" style="display: block;background: rgb(190,190,190);width: 0.7rem;height: 0.02rem">
            请编辑手机号：
            <input id="phone" name="phone" type="text" style="display: block;background: rgb(190,190,190);width: 0.7rem;height: 0.02rem">
            请编辑用户名：
            <input id="username" name="username" type="text" style="display: block;background: rgb(190,190,190);width: 0.7rem;height: 0.02rem">
            请编辑密码：
            <input id="password" name="password" type="password" style="display: block;background: rgb(190,190,190);width: 0.7rem;height: 0.02rem">
            请编辑个人介绍：
            <input id="personalIntroduction" name="personalIntroduction" type="text" style="display: block;background: rgb(190,190,190);width: 0.7rem;height: 0.02rem">
            <input type="submit" style="display: block;float: right;height: 0.02rem;width: 0.09rem">
        </form>
    </div>
</div>
</body>
<script>
    // 预览图片加载-------------------------------------------------------------------------
    let headSculptureFileInput = document.getElementById('headSculptureFile');
    let info = document.getElementById('info');
    let preview = document.getElementById('imagePreview');
    // 监听change事件:
    headSculptureFileInput.addEventListener('change', function () {
        // 清除背景图片:
        preview.style.backgroundImage = '';
        if (!headSculptureFileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        let file = headSculptureFileInput.files[0];
        let size = file.size;
        if (size >= 50 * 1024 * 1024) {
            alert('文件大小超出限制');
            info.innerHTML = '文件大小超出限制';
            return false;
        }
        // 获取File信息:
        info.innerHTML = `文件名称:  + ${file.name}<br>
                                    文件大小: ${file.size} <br>
                                    上传时间: ${file.lastModifiedDate}
                                    `;
        if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        let reader = new FileReader();
        reader.onload = function (e) {
            let data = e.target.result;
            preview.src = data
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);

    });

    // 检验是否为空--------------------------------------------------------------------------
    function checkEditUser() {
        let headSculptureFileInput = document.getElementById('headSculptureFile');
        let headSculptureFileInputValue = headSculptureFileInput.value;
        let usernameInput = document.getElementById('username');
        let usernameInputValue = usernameInput.value;
        let passwordInput = document.getElementById('password');
        let passwordInputValue = passwordInput.value;
        let nicknameInput = document.getElementById('nickname');
        let nicknameInputValue = nicknameInput.value;
        let phoneInput = document.getElementById('phone');
        let phoneInputValue = phoneInput.value;
        let personalIntroductionInput = document.getElementById('personalIntroduction');
        let personalIntroductionInputValue = personalIntroductionInput.value;
        if ('' == headSculptureFileInputValue) {
            alert('未上传头像!')
            return false;
        }
        if ('' == usernameInputValue) {
            alert('未填写用户名!')
            return false;
        }
        if ('' == passwordInputValue) {
            alert('未填写密码!')
            return false;
        }
        if ('' == nicknameInputValue) {
            alert('未填写昵称!')
            return false;
        }
        if ('' == phoneInputValue) {
            alert('未填写手机号!')
            return false;
        }
        if ('' == personalIntroductionInputValue) {
            alert('未填写个人介绍!')
            return false;
        }
        return true;
    }
</script>
</html>